<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/new.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/msg-layer/naranja.min.css}">
    <!--页面样式文件-->
    <style type="text/css">
        .echart-item {
            background: none;
            box-shadow: none;
        }

        .echart-item div {
            margin: 10px;
            padding: 30px 0 20px;
            border-radius: 8px;
        }
    </style>
</head>

<body class="gray-bg">
<!--右侧主体-->

<div class="main">

    <div class="greenhouse-btm clearfix">
        <div class="greenhouse-item  col-sm-6 col-md-3 col-lg-3">
            <div class="greenhouse-info" style="background-image: url(/img/greenhouse-1.png);">
                <p class="title">空气温度</p>
                <p class="num" th:text="${todayInfo.Channel1} + '℃'">32 <span class="unit">℃</span></p>
            </div>
        </div>
        <div class="greenhouse-item  col-sm-6 col-md-3 col-lg-3">
            <div class="greenhouse-info" style="background-image: url(/img/greenhouse-2.png);">
                <p class="title">空气湿度</p>
                <p class="num" th:text="${todayInfo.Channel1} + '%'">32 <span class="unit">%</span></p>
            </div>
        </div>
        <div class="greenhouse-item  col-sm-6 col-md-3 col-lg-3">
            <div class="greenhouse-info" style="background-image: url(/img/greenhouse-3.png);">
                <p class="title">土壤温度</p>
                <p class="num" th:text="${todayInfo.Channel6} + '℃'">32 <span class="unit">℃</span></p>
            </div>
        </div>
        <div class="greenhouse-item  col-sm-6 col-md-3 col-lg-3">
            <div class="greenhouse-info" style="background-image: url(/img/greenhouse-4.png);">
                <p class="title">土壤湿度</p>
                <p class="num" th:text="${todayInfo.Channel5} + '%'">32 <span class="unit">%</span></p>
            </div>
        </div>

    </div>

    <!--图表区域-->
    <div class="wenshi-chart-btm">
        <div class="wenshi-echart-item col-sm-12 col-md-12 col-lg-6">
            <div id="main" style="width:100%;height:410px;background: #FFF;"></div>
        </div>
        <div class="wenshi-echart-item col-sm-12 col-md-12 col-lg-6">
            <div id="main2" style="width:100%;height:410px;background: #FFF;"></div>
        </div>

    </div>

</div>


<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/webjars/sockjs-client/1.0.2/sockjs.min.js}"></script>
<script th:src="@{/webjars/stomp-websocket/2.3.3/stomp.min.js}"></script>
<script th:src="@{/msg-layer/naranja.js}"></script>

<script th:inline="javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var xData = ['12.18', '12.19', '12.20', '12.21', '12.22', '12.23', '12.24', '12.25'];
    var yData = [20, 30, 40, 30, 40, 50, 40, 30];
    var yData2 = [10, 20, 30, 40, 50, 60, 30, 40];


    xData = [[${days}]]


    var airTemperature = [[${airTemperature}]]
    var soilTemperature = [[${soilTemperature}]]


    var airMoisture = [[${airMoisture}]]
    var soilMoisture = [[${soilMoisture}]]


    // 指定图表的配置项和数据
    var temperature = {
        legend: {
            data: ['空气温度', '土壤温度'],
            right: '3%',
            selectedMode: false
        },
        title: {
            text: '一周温度气表走势图',
            x: 'center',
            textStyle: {
                fontSize: 26,
                color: '#2d353e'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: '21%',
            bottom: '7%',
            left: '7%',
            right: '5%'
        },
        xAxis: {
            name: '日期',
            nameTextStyle: {
                color: '#333',
                fontSize: 15,
                padding: [0, 0, 0, -20]
            },
            data: xData,
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#b8dbff'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333',
                    fontSize: 15,
                }
            }
        },
        yAxis: [{
            name: 'm³',
            nameTextStyle: {
                color: '#333',
                fontSize: 18,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#ebeef1'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#b8dbff'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333',
                    fontSize: 18,
                }
            }
        }],
        series: [{
            name: '空气温度',
            type: 'line',
            barWidth: 12,
            symbolSize: 10,
            symbol: 'circle',
            emphasis: {
                itemStyle: {
                    color: '#ff6d10'
                }
            },
            itemStyle: {
                normal: {
                    color: '#ff6d10',
                    barBorderRadius: [0, 0, 0, 0],
                }
            },
            data: airTemperature
        },
            {
                name: '土壤温度',
                type: 'line',
                barWidth: 12,
                symbolSize: 10,
                symbol: 'circle',
                emphasis: {
                    itemStyle: {
                        color: '#6ab196'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#6ab196',
                        barBorderRadius: [0, 0, 0, 0],
                    }
                },
                data: soilTemperature
            }
        ]
    };


    // 指定图表的配置项和数据
    var moisture = {
        legend: {
            data: ['空气湿度', '土壤湿度'],
            right: '3%',
            selectedMode: false
        },
        title: {
            text: '一周湿度气表走势图',
            x: 'center',
            textStyle: {
                fontSize: 26,
                color: '#2d353e'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            top: '21%',
            bottom: '7%',
            left: '7%',
            right: '5%'
        },
        xAxis: {
            name: '日期',
            nameTextStyle: {
                color: '#333',
                fontSize: 15,
                padding: [0, 0, 0, -20]
            },
            data: xData,
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#b8dbff'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333',
                    fontSize: 15,
                }
            }
        },
        yAxis: [{
            name: '%',
            nameTextStyle: {
                color: '#333',
                fontSize: 18,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#ebeef1'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#b8dbff'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#333',
                    fontSize: 18,
                }
            }
        }],
        series: [{
            name: '空气湿度',
            type: 'line',
            barWidth: 12,
            symbolSize: 10,
            symbol: 'circle',
            emphasis: {
                itemStyle: {
                    color: '#ff6d10'
                }
            },
            itemStyle: {
                normal: {
                    color: '#ff6d10',
                    barBorderRadius: [0, 0, 0, 0],
                }
            },
            data: airMoisture
        },
            {
                name: '土壤湿度',
                type: 'line',
                barWidth: 12,
                symbolSize: 10,
                symbol: 'circle',
                emphasis: {
                    itemStyle: {
                        color: '#6ab196'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#6ab196',
                        barBorderRadius: [0, 0, 0, 0],
                    }
                },
                data: soilMoisture
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(temperature);
    myChart2.setOption(moisture);
</script>

</body>

</html>
